<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Luminal</title>
		<script
			async
			src="https://platform.twitter.com/widgets.js"
			charset="utf-8"
		></script>
		<link rel="icon" type="image/x-icon" href="/favicon.ico"/>

		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				font-family:
					-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
					"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
					"Helvetica Neue", sans-serif;
				background: #000;
				color: #fff;
				line-height: 1.6;
				overflow-x: hidden;
			}

			.container {
				max-width: 1200px;
				margin: 0 auto;
				padding: 0 24px;
			}

			/* Header */
			header {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 1000;
				background: rgba(0, 0, 0, 0.8);
				backdrop-filter: blur(20px);
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			}

			nav {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16px 24px;
				max-width: 1200px;
				margin: 0 auto;
			}

			.logo {
				font-size: 24px;
				font-weight: 700;
				background: linear-gradient(45deg, #fff, #888);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}

			.nav-links {
				display: flex;
				list-style: none;
				gap: 32px;
			}

			.nav-links a {
				color: #888;
				text-decoration: none;
				font-size: 14px;
				font-weight: 500;
				transition: color 0.2s ease;
			}

			.nav-links a:hover {
				color: #fff;
			}

			.cta-buttons {
				display: flex;
				gap: 12px;
			}

			.btn {
				padding: 8px 16px;
				border-radius: 6px;
				text-decoration: none;
				font-size: 14px;
				font-weight: 500;
				transition: all 0.2s ease;
				border: 1px solid transparent;
			}

			.btn-secondary {
				color: #888;
				border-color: rgba(255, 255, 255, 0.1);
			}

			.btn-secondary:hover {
				color: #fff;
				border-color: rgba(255, 255, 255, 0.2);
			}

			.btn-primary {
				background: #fff;
				color: #000;
			}

			.btn-primary:hover {
				background: #f0f0f0;
				transform: translateY(-1px);
			}

			/* Hero Section */
			.hero {
				padding: 180px 0 120px;
				text-align: center;
				position: relative;
			}

			.hero::before {
				content: "";
				position: absolute;
				top: 0;
				left: 50%;
				width: 100%;
				height: 100%;
				background: radial-gradient(
					ellipse at center,
					rgba(255, 255, 255, 0.05) 0%,
					transparent 70%
				);
				transform: translateX(-50%);
				pointer-events: none;
			}

			.hero h1 {
				font-size: clamp(48px, 8vw, 96px);
				font-weight: 700;
				line-height: 1.1;
				margin-bottom: 24px;
				background: linear-gradient(180deg, #fff 0%, #888 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}

			.hero-subtitle {
				font-size: 24px;
				color: #888;
				margin-bottom: 48px;
				font-weight: 400;
			}

			.hero-cta {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 16px;
				margin-bottom: 64px;
			}

			.btn-large {
				padding: 16px 32px;
				font-size: 16px;
				border-radius: 8px;
			}

			/* Features Grid */
			.features {
				padding: 120px 0;
			}

			.features-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
				gap: 32px;
				margin-top: 64px;
			}

			.feature-card {
				background: rgba(255, 255, 255, 0.02);
				border: 1px solid rgba(255, 255, 255, 0.1);
				border-radius: 12px;
				padding: 32px;
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;
			}

			.feature-card::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 1px;
				background: linear-gradient(
					90deg,
					transparent,
					rgba(255, 255, 255, 0.3),
					transparent
				);
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			.feature-card:hover {
				background: rgba(255, 255, 255, 0.05);
				border-color: rgba(255, 255, 255, 0.2);
				transform: translateY(-4px);
			}

			.feature-card:hover::before {
				opacity: 1;
			}

			.feature-icon {
				width: 48px;
				height: 48px;
				background: linear-gradient(45deg, #fff, #888);
				border-radius: 12px;
				margin-bottom: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24px;
			}

			.feature-card h3 {
				font-size: 20px;
				font-weight: 600;
				margin-bottom: 12px;
			}

			.feature-card p {
				color: #888;
				line-height: 1.6;
			}

			/* Stats Section */
			.stats {
				padding: 120px 0;
				text-align: center;
				background: linear-gradient(
					180deg,
					transparent 0%,
					rgba(255, 255, 255, 0.02) 50%,
					transparent 100%
				);
			}

			.stats-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
				gap: 48px;
				margin-top: 64px;
			}

			.stat-item h3 {
				font-size: 48px;
				font-weight: 700;
				background: linear-gradient(45deg, #fff, #888);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				margin-bottom: 8px;
			}

			.stat-item p {
				color: #888;
				font-size: 16px;
			}

			/* Footer */
			footer {
				padding: 80px 0 40px;
				border-top: 1px solid rgba(255, 255, 255, 0.1);
			}

			.footer-content {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
				gap: 48px;
				margin-bottom: 48px;
			}

			.footer-section h4 {
				font-size: 16px;
				font-weight: 600;
				margin-bottom: 16px;
			}

			.footer-section ul {
				list-style: none;
			}

			.footer-section ul li {
				margin-bottom: 8px;
			}

			.footer-section ul li a {
				color: #888;
				text-decoration: none;
				font-size: 14px;
				transition: color 0.2s ease;
			}

			.footer-section ul li a:hover {
				color: #fff;
			}

			.footer-bottom {
				text-align: center;
				color: #888;
				font-size: 14px;
			}

			/* Responsive */
			@media (max-width: 768px) {
				.nav-links {
					display: none;
				}

				.hero-cta {
					flex-direction: column;
					align-items: center;
				}

				.btn-large {
					width: 100%;
					max-width: 280px;
				}
			}

			/* Animations */
			@keyframes fadeInUp {
				from {
					opacity: 0;
					transform: translateY(30px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			.fade-in {
				animation: fadeInUp 0.8s ease-out;
			}

			.floating {
				animation: float 6s ease-in-out infinite;
			}

			@keyframes float {
				0%,
				100% {
					transform: translateY(0px);
				}

				50% {
					transform: translateY(-10px);
				}
			}

			.resource-link:hover {
				background-color: #1d1e1f;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			}

			.resource-link {
				text-decoration: none;
				color: inherit;
			}

			.yc-badge {
				display: inline-flex;
				align-items: center;
				border-style: solid;
				border-color: #ff6600;
				border-width: 1px;
				color: white;
				font-family: sans-serif;
				font-size: 14px;
				padding: 4px 12px;
				border-radius: 10px;
				font-weight: bold;
				text-decoration: none;
				margin-bottom: 20px;
				-webkit-box-shadow: inset 0 0 10px #ff6600;
				-moz-box-shadow: inset 0 0 10px #ff6600;
				box-shadow: inset 0 0 10px #ff6600;
			}

			.yc-logo {
				background-color: white;
				color: #ff6600;
				font-weight: bold;
				border-radius: 3px;
				font-size: 12px;
				width: 18px;
				height: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 5px;
				padding-top: 2px;
				transform: translateY(-2px);
			}
		</style>
	</head>

	<body>
		<header>
			<nav>
				<div class="logo">⬤ Luminal</div>
				<!-- <ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#docs">Docs</a></li>
                <li><a href="#templates">Templates</a></li>
                <li><a href="#pricing">Pricing</a></li>
                <li><a href="#enterprise">Enterprise</a></li>
            </ul>
            <div class="cta-buttons">
                <a href="#" class="btn btn-secondary">Log in</a>
                <a href="#" class="btn btn-primary">Sign up</a>
            </div> -->
				<a
					class="cta-buttons github-button"
					href="https://github.com/jafioti/luminal"
					data-size="large"
					data-show-count="true"
					aria-label="Star jafioti/luminal on GitHub"
					>Star</a
				>
			</nav>
		</header>

		<main>
			<section class="hero">
				<div class="container">
					<h1 class="fade-in">Ship AI at Light Speed</h1>
					<p class="hero-subtitle fade-in">
						The serverless cloud for AI companies, providing the
						low-level hardware optimizations and cloud reliability
						innovators need to reach market first
					</p>
					<div class="yc-badge fade-in">
						Backed by <span class="yc-logo">Y</span> Combinator
					</div>
					<div class="hero-cta fade-in">
						<a
							href="https://github.com/jafioti/luminal"
							class="btn btn-primary btn-large"
							>See the Github</a
						>
						<a
							href="https://calendly.com/accounts-luminalai/30min"
							class="btn btn-secondary btn-large"
							>Book a meeting</a
						>
					</div>
				</div>
			</section>

			<section class="features" id="features">
				<div class="container">
					<div style="text-align: center; margin-bottom: 64px">
						<h2
							style="
								font-size: 48px;
								font-weight: 700;
								margin-bottom: 16px;
							"
						>
							Built from the Lowest Level
						</h2>
						<p style="font-size: 20px; color: #888">
							Everything you need to deploy AI Models that run
							FAST
						</p>
					</div>

					<div class="features-grid">
						<div
							class="feature-card floating"
							style="animation-delay: 0.8s"
						>
							<div class="feature-icon">🚀</div>
							<h3>True Serverless AI</h3>
							<p>
								Deploy your model without worrying about
								dependency hell or Docker Containers
							</p>
						</div>
						<div class="feature-card floating">
							<div class="feature-icon">🔥</div>
							<h3>Easy Torch Replacement</h3>
							<p>
								Our Python Library matches with PyTorch to allow
								for easy rollover from development to production
							</p>
						</div>

						<div
							class="feature-card floating"
							style="animation-delay: 0.6s"
						>
							<div class="feature-icon">📊</div>
							<h3>Auto-Scaling</h3>
							<p>
								Our serverless cloud seamlessly autoscales
								workloads, allowing for configuration-free
								handling of variable traffic
							</p>
						</div>

						<div
							class="feature-card floating"
							style="animation-delay: 0.6s"
						>
							<div class="feature-icon">📦</div>
							<h3>Auto-Batching</h3>
							<p>
								Our cloud automatically handles batching for
								you-- reducing the engineering overhead on your
								production team
							</p>
						</div>

						<div
							class="feature-card floating"
							style="animation-delay: 0.6s"
						>
							<div class="feature-icon">📶</div>
							<h3>Weight Streaming</h3>
							<p>
								Load model weights on demand for efficient
								memory usage and faster inference
							</p>
						</div>

						<div
							class="feature-card floating"
							style="animation-delay: 1s"
						>
							<div class="feature-icon">🏃</div>
							<h3>Fast & Easy Setup</h3>
							<p>
								No configurations or Docker Containers to worry
								about. Easily take a model from your laptop and
								deploy it to production
							</p>
						</div>
					</div>
				</div>
			</section>

			<section
				class="resources"
				style="
					padding: 80px 0;
					background: linear-gradient(
						135deg,
						rgba(255, 255, 255, 0.03) 0%,
						rgba(255, 255, 255, 0.01) 100%
					);
					border-top: 1px solid rgba(255, 255, 255, 0.05);
					border-bottom: 1px solid rgba(255, 255, 255, 0.05);
				"
			>
				<div class="container">
					<div
						style="
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							gap: 64px;
							flex-wrap: wrap;
						"
					>
						<!-- Left side - Title and description -->
						<div style="flex: 1; min-width: 300px">
							<h2
								style="
									font-size: 36px;
									font-weight: 700;
									margin-bottom: 16px;
									line-height: 1.2;
								"
							>
								Resources & Community
							</h2>
							<p
								style="
									font-size: 18px;
									color: #888;
									margin-bottom: 32px;
									max-width: 400px;
								"
							>
								Everything you need to get started with Luminal
								and connect with our growing developer
								community.
							</p>

							<!-- Featured resource -->
							<div
								style="
									background: linear-gradient(
										135deg,
										rgba(255, 255, 255, 0.08) 0%,
										rgba(255, 255, 255, 0.02) 100%
									);
									border: 1px solid rgba(255, 255, 255, 0.15);
									border-radius: 16px;
									padding: 24px;
									margin-bottom: 24px;
								"
							>
								<div
									style="
										display: flex;
										align-items: center;
										gap: 16px;
										margin-bottom: 16px;
									"
								>
									<div
										style="
											width: 40px;
											height: 40px;
											background: linear-gradient(
												45deg,
												#4caf50,
												#45a049
											);
											border-radius: 10px;
											display: flex;
											align-items: center;
											justify-content: center;
											font-size: 20px;
										"
									>
										📚
									</div>
									<div>
										<h3
											style="
												font-size: 18px;
												font-weight: 600;
												margin: 0;
											"
										>
											Quick Start Guide
										</h3>
										<p
											style="
												color: #aaa;
												font-size: 14px;
												margin: 0;
											"
										>
											Get up and running in minutes
										</p>
									</div>
								</div>
								<a
									href="https://github.com/jafioti/luminal/tree/main/examples"
									style="
										color: #4caf50;
										text-decoration: none;
										font-weight: 500;
										font-size: 14px;
									"
									>Start Building →</a
								>
							</div>
						</div>

						<!-- Right side - Resource links in compact list -->
						<div style="flex: 1; min-width: 300px">
							<div
								style="
									display: flex;
									flex-direction: column;
									gap: 20px;
								"
							>
								<a
									href="https://discord.gg/2Mxur3CgYT"
									target="_blank"
									class="resource-link"
									style="
										display: flex;
										align-items: center;
										gap: 16px;
										padding: 16px;
										border-radius: 8px;
										transition: all 0.2s ease;
										cursor: pointer;
										text-decoration: none;
										color: inherit;
									"
								>
									<div
										style="
											width: 32px;
											height: 32px;
											background: linear-gradient(
												45deg,
												#2196f3,
												#1976d2
											);
											border-radius: 8px;
											display: flex;
											align-items: center;
											justify-content: center;
											font-size: 16px;
										"
									>
										💬
									</div>
									<div style="flex: 1">
										<h4
											style="
												font-size: 16px;
												font-weight: 600;
												margin: 0 0 4px 0;
											"
										>
											Discord Community
										</h4>
										<p
											style="
												color: #888;
												font-size: 14px;
												margin: 0;
											"
										>
											Join our developer community
										</p>
									</div>
									<span
										style="color: #2196f3; font-size: 14px"
										>→</span
									>
								</a>

								<a
									href="https://medium.com/@mgunton7/list/luminal-7edddd15453b"
									target="_blank"
									class="resource-link"
									style="
										display: flex;
										align-items: center;
										gap: 16px;
										padding: 16px;
										border-radius: 8px;
										transition: all 0.2s ease;
										cursor: pointer;
										text-decoration: none;
										color: inherit;
									"
								>
									<div
										style="
											width: 32px;
											height: 32px;
											background: linear-gradient(
												45deg,
												#9c27b0,
												#7b1fa2
											);
											border-radius: 8px;
											display: flex;
											align-items: center;
											justify-content: center;
											font-size: 16px;
										"
									>
										📝
									</div>
									<div style="flex: 1">
										<h4
											style="
												font-size: 16px;
												font-weight: 600;
												margin: 0 0 4px 0;
											"
										>
											Blog & Updates
										</h4>
										<p
											style="
												color: #888;
												font-size: 14px;
												margin: 0;
											"
										>
											Technical insights and news
										</p>
									</div>
									<span
										style="color: #9c27b0; font-size: 14px"
										>→</span
									>
								</a>

								<a
									href="https://docs.luminalai.com"
									target="_blank"
									class="resource-link"
									style="
										display: flex;
										align-items: center;
										gap: 16px;
										padding: 16px;
										border-radius: 8px;
										transition: all 0.2s ease;
										cursor: pointer;
										text-decoration: none;
										color: inherit;
									"
								>
									<div
										style="
											width: 32px;
											height: 32px;
											background: linear-gradient(
												45deg,
												#9c27b0,
												#7b1fa2
											);
											border-radius: 8px;
											display: flex;
											align-items: center;
											justify-content: center;
											font-size: 16px;
										"
									>
										📝
									</div>
									<div style="flex: 1">
										<h4
											style="
												font-size: 16px;
												font-weight: 600;
												margin: 0 0 4px 0;
											"
										>
											Documentation
										</h4>
										<p
											style="
												color: #888;
												font-size: 14px;
												margin: 0;
											"
										>
											Simple Explanations of the ML
											Compiler
										</p>
									</div>
									<span
										style="color: #9c27b0; font-size: 14px"
										>→</span
									>
								</a>
							</div>
						</div>
					</div>
				</div>
			</section>

			<section class="stats">
				<div class="container">
					<h2
						style="
							font-size: 48px;
							font-weight: 700;
							margin-bottom: 16px;
						"
					>
						Achieve World-Class Optimizations Automatically
					</h2>
					<p style="font-size: 20px; color: #888">
						Our Compiler is the First in the World to Automatically
						Generate Flash Attention from Naive Attention
					</p>

					<blockquote
						class="twitter-tweet"
						data-dnt="true"
						align="center"
					>
						<p lang="en" dir="ltr">
							Luminal can discover flash attention entirely
							automatically.<br /><br />We&#39;ve been working
							towards this north star in our search compiler.
							Check out the prototype demo below ↓
							<a href="https://t.co/TJrzEJZRmV"
								>pic.twitter.com/TJrzEJZRmV</a
							>
						</p>
						&mdash; Joe Fioti (@joefioti)
						<a
							href="https://twitter.com/joefioti/status/1925978115982950770?ref_src=twsrc%5Etfw"
							>May 23, 2025</a
						>
					</blockquote>
				</div>
			</section>
		</main>

		<footer>
			<div class="container">
				<div
					class="founders-section"
					style="margin-bottom: 48px; text-align: center"
				>
					<h3
						style="
							font-size: 24px;
							font-weight: 600;
							margin-bottom: 16px;
							background: linear-gradient(45deg, #fff, #888);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
						"
					>
						Get in touch with our founding team
					</h3>

					<div
						class="founders-grid"
						style="
							display: grid;
							grid-template-columns: repeat(
								auto-fit,
								minmax(280px, 1fr)
							);
							gap: 24px;
							max-width: 900px;
							margin: 0 auto;
						"
					>
						<div
							class="founder-card"
							style="
								background: rgba(255, 255, 255, 0.02);
								border: 1px solid rgba(255, 255, 255, 0.1);
								border-radius: 16px;
								padding: 24px;
								transition: all 0.3s ease;
								position: relative;
								overflow: hidden;
							"
						>
							<div
								class="founder-avatar"
								style="
									width: 60px;
									height: 60px;
									background: linear-gradient(
										135deg,
										#4caf50,
										#45a049
									);
									border-radius: 50%;
									margin: 0 auto 16px;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24px;
									font-weight: 700;
									color: white;
								"
							>
								J
							</div>
							<h4
								style="
									font-size: 18px;
									font-weight: 600;
									margin-bottom: 8px;
								"
							>
								Joe Fioti
							</h4>
							<a
								href="mailto:joe@luminalai.com"
								class="founder-email"
								style="
									display: inline-flex;
									align-items: center;
									gap: 8px;
									color: #4caf50;
									text-decoration: none;
									font-size: 14px;
									font-weight: 500;
									transition: all 0.2s ease;
								"
							>
								<span style="font-size: 16px">✉</span>
								joe@luminalai.com
							</a>
						</div>

						<div
							class="founder-card"
							style="
								background: rgba(255, 255, 255, 0.02);
								border: 1px solid rgba(255, 255, 255, 0.1);
								border-radius: 16px;
								padding: 24px;
								transition: all 0.3s ease;
								position: relative;
								overflow: hidden;
							"
						>
							<div
								class="founder-avatar"
								style="
									width: 60px;
									height: 60px;
									background: linear-gradient(
										135deg,
										#2196f3,
										#1976d2
									);
									border-radius: 50%;
									margin: 0 auto 16px;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24px;
									font-weight: 700;
									color: white;
								"
							>
								M
							</div>
							<h4
								style="
									font-size: 18px;
									font-weight: 600;
									margin-bottom: 8px;
								"
							>
								Matthew Gunton
							</h4>
							<a
								href="mailto:matthew@luminalai.com"
								class="founder-email"
								style="
									display: inline-flex;
									align-items: center;
									gap: 8px;
									color: #2196f3;
									text-decoration: none;
									font-size: 14px;
									font-weight: 500;
									transition: all 0.2s ease;
								"
							>
								<span style="font-size: 16px">✉</span>
								matthew@luminalai.com
							</a>
						</div>

						<div
							class="founder-card"
							style="
								background: rgba(255, 255, 255, 0.02);
								border: 1px solid rgba(255, 255, 255, 0.1);
								border-radius: 16px;
								padding: 24px;
								transition: all 0.3s ease;
								position: relative;
								overflow: hidden;
							"
						>
							<div
								class="founder-avatar"
								style="
									width: 60px;
									height: 60px;
									background: linear-gradient(
										135deg,
										#f72525,
										#f73636
									);
									border-radius: 50%;
									margin: 0 auto 16px;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24px;
									font-weight: 700;
									color: white;
								"
							>
								J
							</div>
							<h4
								style="
									font-size: 18px;
									font-weight: 600;
									margin-bottom: 8px;
								"
							>
								Jake Stevens
							</h4>
							<a
								href="mailto:jake@luminalai.com"
								class="founder-email"
								style="
									display: inline-flex;
									align-items: center;
									gap: 8px;
									color: #f72525;
									text-decoration: none;
									font-size: 14px;
									font-weight: 500;
									transition: all 0.2s ease;
								"
							>
								<span style="font-size: 16px">✉</span>
								jake@luminalai.com
							</a>
						</div>
					</div>
				</div>
				<div class="footer-bottom">
					<p>&copy; 2025 Luminal AI Inc. All rights reserved.</p>
				</div>
			</div>
		</footer>

		<script async defer src="https://buttons.github.io/buttons.js"></script>

		<script>
			// Smooth scrolling for navigation links
			document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
				anchor.addEventListener("click", function (e) {
					e.preventDefault();
					const target = document.querySelector(
						this.getAttribute("href"),
					);
					if (target) {
						target.scrollIntoView({
							behavior: "smooth",
							block: "start",
						});
					}
				});
			});

			// Add scroll effect to header
			let lastScrollY = window.scrollY;
			const header = document.querySelector("header");

			window.addEventListener("scroll", () => {
				if (window.scrollY > lastScrollY && window.scrollY > 100) {
					header.style.transform = "translateY(-100%)";
				} else {
					header.style.transform = "translateY(0)";
				}
				lastScrollY = window.scrollY;
			});

			// Intersection Observer for animations
			const observerOptions = {
				threshold: 0.1,
				rootMargin: "0px 0px -50px 0px",
			};

			const observer = new IntersectionObserver((entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						entry.target.classList.add("fade-in");
					}
				});
			}, observerOptions);

			// Observe feature cards
			document.querySelectorAll(".feature-card").forEach((card) => {
				observer.observe(card);
			});

			// Observe stats
			document.querySelectorAll(".stat-item").forEach((stat) => {
				observer.observe(stat);
			});
		</script>
	</body>
</html>
